<template>
	<view :class="['comp-role']">
		<view :class="['role',status]"  @animationend="statusAniEnd">
			<view class="role-name">
				{{player.nickname}}
			</view>
			<view class="progress">
				<view class="hp">
					<comp-progress :size="12" activeColor="var(--color-red)" :percent="player.attr.hp/max_hp * 100"></comp-progress>
					<view class="info-text">{{player.attr.hp}} / {{max_hp}}</view>
				</view>
				<view class="rate">
					<comp-progress :size="3" activeColor="#0099cc" :percent="rate"></comp-progress>
				</view>
			</view>
		</view>
		<view class="damageData" v-if="damageData.length > 0">
			<block v-for="(item,index) in damageData">
				<view :class="['text',item.damage_type]" v-if="item.visible" @animationend="wavingBloodEnd(index)">{{item.damage_value}}</view>
			</block>
		</view>
	</view>
</template>

<script>
	import compProgress from "@/components/comp-progress/comp-progress.vue"
	export default {
		name:"comp-player",
		components:{
			compProgress
		},
		props : ['player'],
		data() {
			return {
				rate : 0,
				max_hp : 0,
				damageData:[],
				status : 'idle'
			};
		},
		mounted() {

			this.max_hp = Object.freeze(this.player.attr.hp);
			this.rate = 0;
			this.status = 'idle'
			
			if(this.worker_setInterval){
				this.worker_setInterval.terminate()
			}

			
			this.worker_setInterval = new Worker('./static/worker/worker_setInterval.js');
			this.worker_setInterval.postMessage({
				interval : 10
			})
			
			this.worker_setInterval.onmessage = (e) => {
				
				if(getApp().globalData['battleEnd']) return;
				
				this.rate += this.player.attr.spd / 100;
				
				if(this.rate >= 100){
					this.rate = 0;
					this.attack()
				}

			}
			
			
			this.boundUnderAttack = this.underAttack.bind(this);
			uni.$on('monster_attack', this.boundUnderAttack)

			
			
		},
		destroyed() {
			this.worker_setInterval.terminate();
			uni.$off('monster_attack',this.boundUnderAttack)
		},
		methods : {
			attack(){
				this.status = 'attack';
				
				let attack_count = 1;
				
				if(Math.random() * 100 <= 0){
					attack_count = 3
				}

				for(let i=0;i<attack_count;i++){
					setTimeout(() => {
						let target_monster = getApp().globalData['target_monster'];
						
						let damage_type = 'normal';

						let player_damage = this.$common.rnd(this.player.attr.min_ac,this.player.attr.max_ac);
						let base_damage = Math.max(1,Math.ceil(player_damage * player_damage / (player_damage + this.$common.rnd(target_monster.min_def,target_monster.max_def))));
						let damage_value = base_damage + this.player.attr.fix_ac;
						
						if(Math.random() * 100 <= this.player.attr.crit){
							damage_type = 'crit';
							damage_value *= parseInt(this.player.attr.crit_percent / 100)
						}
						
						uni.$emit('player_attack',{
							damage_type,
							damage_value
						})
						
						//吸血
						if(this.player.attr.suck_blood > 0){
							
							let suck_blood_num = Math.max(1,parseInt(base_damage * this.player.attr.suck_blood / 100))
							
							this.player.attr.hp += suck_blood_num;
							if(this.player.attr.hp >= this.max_hp){
								this.player.attr.hp = this.max_hp;
							}
							if(getApp().globalData.appVisibleState == 'onShow'){
								this.damageData.push({
									visible : true,
									damage_type : 'suck_blood',
									damage_value : suck_blood_num
								})
							}
						}
						
						
					},250 * i)
				}
				
				
			},
			underAttack(attack){

				this.status = 'underAttack'
				
				if(getApp().globalData.appVisibleState == 'onShow'){
					attack.visible = true;
					this.damageData.push(attack)
				}
				
				
				this.player.attr.hp -= attack.damage_value;
				if(this.player.attr.hp <= 0){
					this.dead()
				}
				
			},
			dead(){
				this.status = 'dead';
				this.player.attr.hp = 0;
				this.rate=0;
				this.worker_setInterval.terminate();
				
				getApp().globalData['battleEnd'] = true;
				getApp().globalData['angry_value'] = 0;
				this.$store.commit('commit_angry_value',0)
				uni.$emit('refreshBattle',{
					type : 'monster'
				});
			},
			statusAniEnd(){
				if(this.status == 'dead') return;
				this.status = 'idle'
			},
			wavingBloodEnd(index){
				this.damageData[index].visible = false;
			}
		}
	}
</script>

<style lang="scss">
	@include role('player');
</style>